<template>
	<view class="content base-con-bg">
		<view class="play-con">
			<video @click="setVideo=-1" id="video" @fullscreenchange="fullscreenchange" :src="getVideoSrc" @timeupdate="timeupdate" :initial-time="initialTime" @ended="videoEnd" :autoplay="autoplay" @pause="pause">
				<view class="parent-cover" :class="{'on': [0,1].includes(setVideo)}">
					<view class="set-video-btns1" :class="{'vertical': videoDirection=='horizontal'}" v-if="![0,1].includes(setVideo)">
						<view @click.stop="setVideoClick(1)" class="btn">{{speedList[speedActive]}}</view>
					</view>
					<view class="set-video-btns2" :class="{'on': [0,1].includes(setVideo),'vertical': videoDirection=='horizontal'}" v-show="[0,1].includes(setVideo)">
						<template v-if="setVideo===0">
							<view @click.stop="setVideoClick2(0,index)" class="btn" :class="{'on': definitionActive==index}" v-for="(item,index) in definitionList" :key="index">{{item}}</view>
						</template>
						<template v-else-if="setVideo===1">
							<view @click.stop="setVideoClick2(1,index)" class="btn btn2" :class="{'on': speedActive==index}" v-for="(item,index) in speedList" :key="index">{{item}}</view>
						</template>
					</view>
				</view>
				<view class="user-id" :style="{bottom: positionNum.bottom+'%',right: positionNum.right+'%'}">{{loginInfo.phone}}</view>
			</video>
		</view>
		<view class="main-info" v-if="examObj?.cates[index.i1]">
			<view class="curriculum-title">
				<view class="title">{{examObj?.cates[index.i1]?.subjects[index.i2]?.title}}</view>
				<view class="base-tips">
					<view class="tip">{{examObj?.cates[index.i1]?.subjects[index.i2]?.playNum}}次播放</view>
					<view class="tip">全部{{examObj?.cates[index.i1]?.subjects?.length}}个课时</view>
				</view>
				<view class="intro-collect">
					<view class="intro">简介</view>
					<view class="collect">
					</view>
				</view>
				<view class="title2">{{examObj?.course?.title}}</view>
			</view>

			<scroll-view 
				class="base-curr-main"
				scroll-y
				:scroll-top="scrollTop" 
				@scroll="handleScroll"
			>
			
				<view class="list">
					<view class="item">
						<view class="item-list">
							
							<template v-for="(ditem,dindex) in examObj?.cates">
								<view class="child-item" :class="{'on': index?.i1==dindex && index?.i2==cindex}" v-for="(item,cindex) in ditem?.subjects" :key="cindex" @click="palyItem(dindex,cindex)">
									<view class="base-play"></view>
									<view class="child-info">
										<view class="child-title">{{getNumber(dindex,cindex)}}.{{item?.title}}</view>
										<view class="base-tips"><span class="tip">陶老师</span><span class="tip">{{item?.playNum}}次播放</span><span class="tip">已学{{examUser?.subPercentMap?.[item?.id]}}%</span></view>
									</view>
									<view class="duration">{{$common.videoTimeForamt(item?.time)}}</view>
								</view>
							</template>
						</view>
					</view>
				</view>
				<!-- </view> -->
			</scroll-view>
		</view>
	
	</view>
</template>

<script>
	import { getCourseSubjectByCateNotLogin } from "@/api/index.js"
	export default {
		data() {
			return {
				videoSrc: '',
				isCollect: false,
				examObj: {course:{},cates:[],notice:[]},
				index: {i1: 0,i2: 0},
				videoCache: [],//缓存列表
				COLLECTLIST: [],
				examUser: {},
				planVideo: 0,//播放进度
				initialTime: 0,//初始播放进度
				timer: null,
				isplay: false,//是否已执行定时保存
				save: [],
				storage: [],
				autoplay: false,//是否自动播放
				speedList: ['0.5x','0.8x','1.0x','1.25x','1.5x','2.0x'],
				speedActive: 2,
				definitionList: ['标清','高清','超清'],
				definitionActive: 1,
				setVideo: -1,
				videoDirection: '',//视频方向vertical 或 horizontal
				positionNum: {bottom: 10,right: 4},
				uidTime: null,
				capture: null,
				currentIndex: 0,
				higherSubjects: [],
				lowerSubjects: [],
				isLoading: false,
				lastLoadTime: 0,
				scrollTop: 0,        // 控制滚动位置
				currentScrollPos: 0,  // 记录实时滚动位置
			}
		},
		computed: {
			getVideoSrc(){
				let cates=this.examObj?.cates[this.index.i1];
				if(cates?.subjects[this.index.i2]){
					return cates?.subjects[this.index.i2].videoUrl
				}
				return ''
			},
			loginInfo() {
				return this.$store.state.loginInfo;
			},
		},
		onLoad(options) {
			console.log(options,'---------65')
			setTimeout(()=>{
				this.examObj=this.$store.state.examObj;
				this.handleScrollToBottom(options.id || '');

				// options.index 当前进入的章节index
				// 找到this.examObj中章节没有subjects的index和id

				this.examObj?.cates?.forEach((v, i) => {
					if(!v?.subjects?.length){
						if(i > this.currentIndex) {
							this.higherSubjects.push({id: v.id, i});
						} else {
							this.lowerSubjects.push({id: v.id, i});
						}
					}
				})
				console.log(this.loginInfo,'---------108')
				console.log(this.examObj,'---------60')
			},500)
			this.capture=setInterval(()=>{
				this.setDisableCapture();
			},1000*30)
			this.uidTime=setInterval(()=>{
				Object.assign(this.positionNum,{
					// 10,4 80,80
					bottom: Math.random() * 70+10,
					right: Math.random() * 76+4,
				})
			},15000)
		},
		onShow(){
			this.setDisableCapture();
		},
		onUnload() {
			clearInterval(this.timer);
			this.closeDisableCapture();
			clearInterval(this.uidTime);
			clearInterval(this.capture);
		},
		onHide(){
			this.closeDisableCapture();
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('video', this);//createSelectorQuery
		},
		methods: {
			// 记录实时滚动位置
			handleScroll(e) {
				this.currentScrollPos = e.detail.scrollTop
			},
			async handleScrollToBottom(id) {
				console.log('----handleScrollToBottom')
				if (this.isLoading || Date.now() - this.lastLoadTime < 500) return;
				this.isLoading = true;
				this.lastLoadTime = Date.now();
				try {
					const res = await getCourseSubjectByCateNotLogin({ cateId: id || cate.id });
					this.examObj.cates[0].subjects = res.data;
					await this.$nextTick();
					await new Promise(resolve => setTimeout(resolve, 100));
				} finally {
					this.isLoading = false;
				}
			},
			// 获取序号
			getNumber(index,cindex){
				let num=1;
				for(let i=0;i<this.examObj?.cates?.length;i++){
					for(let j=0;j<this.examObj?.cates[i]?.subjects.length;j++){
						if(i==index && j>=cindex){
							return num
						}else{
							num+=1
						}
					}
				}
				return num
			},
			// 设置不能录屏
			setDisableCapture() {
				// #ifdef MP-WEIXIN
				wx.setVisualEffectOnCapture({
					visualEffect: 'hidden',
				});
				wx.getScreenRecordingState({
					success: (res)=>{
						if(res.state=='on'){
							uni.showModal({
								title:"温馨提示",
								content: '该页面禁止录屏，请关闭录屏后再进',
								showCancel: false,
								success: ()=>{
									uni.navigateBack()
								}
							})
						}
					}
				})
				// #endif
				// #ifdef MP-TOUTIAO
				tt.onUserScreenRecord((res)=>{
					if(res.state=='start'){
						uni.showModal({
							title:"温馨提示",
							content: '该页面禁止录屏，请关闭录屏后再进',
							showCancel: false,
							success: ()=>{
								uni.navigateBack()
							}
						})
					}
				})
				tt.disableUserScreenRecord()
				// #endif
			},
			// 关闭监听录屏
			closeDisableCapture() {
				// #ifdef MP-WEIXIN
				wx.setVisualEffectOnCapture({
					visualEffect: 'none',
				});
				// #endif
				// #ifdef MP-TOUTIAO
				tt.offUserScreenRecord()
				tt.enableUserScreenRecord()
				// #endif
			},
			// 视频全屏操作时触发
			fullscreenchange(e){
				console.log(e,'------176')
				this.videoDirection=e.detail.direction;
			},
			// 视频设置清晰度和播放速度
			setVideoClick2(i,index){
				if(i===0){
					this.definitionActive=index
				}else if(i===1){
					this.speedActive=index;
					this.videoContext.playbackRate(parseFloat(this.speedList[this.speedActive]))
				}
				this.setVideo=-1
			},
			// 视频设置清晰度和播放速度
			setVideoClick(i){
				this.setVideo=i;
			},
			// 播放次数添加
			// videoCount(){
			// 	videoCount({sid: this.examObj.cates[this.index.i1].subjects[this.index.i2].id,successType: 'type1'}).then(res=>{
			// 		console.log(res,'=========264')
			// 	})
			// },
			// 播放结束
			videoEnd(){
				clearInterval(this.timer);
				this.initialTime=100;
			},
			pause(){
				
			},
			// 视频播放进度变化时触发
			timeupdate(e){
				this.planVideo=Math.floor(e.detail.currentTime/e.detail.duration*100);
				this.planVideo>100 && (this.planVideo=100);
				if(!this.isplay && this.planVideo>=0){
					this.isplay=true;
				}
			},
			palyItem(dindex,index){
				if(this.index.i1==dindex && this.index.i2==index) return;
				this.index.i1=dindex;
				this.index.i2=index;
				this.autoplay=true;
				// this.videoCount();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	// 课程列表
	.base-curr-main{
		flex: 1;
		overflow-y: scroll;
		padding: 24rpx 20rpx;
		.statistics{
			display: flex;
			align-items: center;
			margin-bottom: 36rpx;
			color: #9DA0A7;
			&,.iconfont{
				font-size: 24rpx;
			}
			.iconfont{
				position: relative;
				margin: 0 4rpx 0 40rpx;
				&::after{
					content: "";
					position: absolute;
					top: 50%;
					left: -18rpx;
					width: 2rpx;
					height: 20rpx;
					margin-top: -10rpx;
					background-color: #9DA0A7;
				}
			}
		}
		.cache-btn{
			display: flex;
			align-items: center;
		}
		.list{
			.item-title{
				position: relative;
				height: 52rpx;
				padding: 0 64rpx 0 12rpx;
				line-height: 52rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #303030;
				background-color: #F2F3F7;
				margin-bottom: 24rpx;
				&::after{
					content: "";
					position: absolute;
					top: 50%;
					right: 16rpx;
					border-top: 10rpx solid #9DA0A7;
					border-left: 9rpx solid transparent;
					border-right: 9rpx solid transparent;
					transform: rotate(180deg);
				}
				&.off{
					&::after{
						transform: rotate(0);
					}
				}
			}
		}
		.item-list{
			padding: 34rpx 16rpx 36rpx 10rpx;
		}
		.child-item{
			display: flex;
			margin-bottom: 50rpx;
			&.live{
				.child-title,.duration{
					color: #CB6D8F;
				}
				.base-play{
					border-color: #E9C0CF;
					&::after{
						border-top-color: #CB6D8F;
					}
				}
			}
			.base-play,.duration{
				flex-shrink: 0;
			}
			.base-play{
				margin: 8rpx 12rpx 0 0;
			}
			.child-info{
				width: 455rpx;
				overflow: hidden;
			}
			.child-title{
				margin-bottom: 6rpx;
				line-height: 38rpx;
				font-size: 30rpx;
				color: #303030;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.duration{
				flex: 1;
				text-align: right;
				font-size: 24rpx;
				color: #9DA0A7;
			}
		}
	}
	// tip样式
	.base-tips{
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #9DA0A7;
		.tip{
			&::after{
				content: "";
				display: inline-block;
				width: 2rpx;
				height: 20rpx;
				margin: 0 10rpx;
				background-color: #9DA0A7;
			}
			&:last-child{
				&::after{
					display: none;
				}
			}
		}
	}
	// 播放图标
	.base-play{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52rpx;
		height: 30rpx;
		border: 2rpx solid #D0D1D3;
		border-radius: 8rpx;
		background-color: #EFF0F2;
		&::after{
			content: "";
			margin-left: 5.5rpx;
			border-top: 18rpx solid #99A0B0;
			border-left: 11rpx solid transparent;
			border-right: 11rpx solid transparent;
			transform: rotate(-90deg);
		}
		&.pen-icon{
			color: #99A0B0;
			.iconfont{
				font-size: 20rpx;
			}
			&::after{
				display: none;
			}
		}
	}
	.play-con{
		position: relative;
		padding: 22rpx 34rpx;
		background-color: #1A1A1A;
		video{
			position: relative;
			width: 100%;
			height: 382rpx;
		}
	}
	.base-curr-main{
		flex: 1;
		border-radius: 18rpx;
		background-color: #042F51;
		.child-title{
			color: #fff;
		}
	}
	.main-info{
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		padding: 22rpx 30rpx 74rpx;
		background-color: #094E85;
		position: relative;
		.isLoading{
			position: absolute;
			top: 298rpx;
			left: 50%;
			transform: translateX(-50%);
			width: calc(100% - 60rpx);
			height: calc(100% - 298rpx);
			// height: calc(100% - 372rpx);
			// background-color: rgba(5, 48, 82, 0.4);
			display: flex;
			justify-content: center;
			padding-top: 200rpx;
		}
		.spinner {
				animation: rotate 1.5s linear infinite;
				::v-deep .uni-icons{
					color: #5e8bfe !important;
				}
			}
			@keyframes rotate {
				50% {
					opacity: 0.2;
				}
			}
	}
	.curriculum-title{
		height: 276rpx;
		padding-bottom: 10rpx;
		overflow: hidden;
		overflow-y: auto;
		color: #fff;
		.title{
			margin-bottom: 12rpx;
			font-size: 38rpx;
			font-weight: bold;
		}
		.base-tips{
			margin-bottom: 12rpx;
			.tip{
				&::after{
					width: 4rpx;
					height: 4rpx;
					margin: 0 20rpx;
					transform: translateY(-5rpx);
					border-radius: 50%;
				}
			}
		}
		.intro-collect{
			display: flex;
			justify-content: space-between;
		}
		.intro{
			font-size: 38rpx;
		}
		.collect{
			display: flex;
			.item{
				margin-left: 60rpx;
				font-size: 20rpx;
				color: #90B8D2;
				&.on{
					.iconfont{
						color: #FDC003;
					}
				}
			}
			.iconfont{
				margin-bottom: 10rpx;
			}
		}
		.title2{
			margin-bottom: 40rpx;
			font-size: 32rpx;
		}
	}
	.base-curr-main{
		padding: 24rpx 22rpx;
		.base-play{
			background-color: #042F51;
			&::after{
				border-top: 0.5625rem solid #fff;
			}
		}
		.item-list{
			padding: 0;
		}
	}
	.child-item{
		&.on{
			.child-title{
				color: #FDC003;
			}
		}
	}
	.parent-cover{
		position: absolute;
		z-index: 1111;
		// top: var(--status-bar-height);
		top: var(--window-top);
		right: 0;
		min-height: 200rpx;
		min-width: 5em;
		transform: translateY(91rpx);
		&.on{
			height: 382rpx;
			transform: translateY(0);
		}
	}
	.set-video-btns1,.set-video-btns2{
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 111111;
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		.btn{
			margin: 5px 0;
		}
	}
	.set-video-btns1{
		width: 5em;
		&.vertical{
			font-size: 16rpx;
		}
	}
	.set-video-btns2{
		right: -7em;
		width: 7em;
		background-color: rgba(0,0,0,.3);
		&.on{
			right: 0;
			animation-name: rightVideoexamlp;
			animation-duration: .3s;
		}
		.btn2{
			padding: 15rpx 0;
		}
		.on{
			color: #FDC003;
		}
		&.vertical{
			width: 5em;
			font-size: 14rpx;
		}
	}
	@keyframes rightVideoexamlp {
	  0%   {
		  right: -7em;
	  }
	  100% {
		  right: 0;
	  }
	}
	// .user-id{
	// 	position: fixed;
	// 	top: var(--window-top);
	// 	right: 12rpx;
	// 	z-index: 1111;
	// 	transform: translateY(340rpx);
	// 	color: #fff;
	// 	opacity: .6;
	// 	font-size: 24rpx;
	// }
	.user-id{
		position: absolute;
		bottom: 80%;
		right: 80%;
		width: 160rpx;
		height: 1em;
		line-height: 1em;
		// padding: 4rpx 0;
		// white-space: initial;
		// text-align: center;
		font-size: 20rpx;
		color: #fff;
		opacity: .4;
		// z-index: -1;
	}
	
</style>
